<template>
	<view class="workerDetail">
		<view class="" style="position: fixed;top: 0;left: 0;width: 750rpx;z-index: 99999;" v-if="ceShow">
			<u-notice-bar mode="horizontal" :list="noticeList"></u-notice-bar>
		</view>
		<view class="workerDetail_header">
			<image :src="info.avatar" mode=""></image>
			<view class="" style="color: #fff;">
				{{info.nickname}}
			</view>
		</view>
		<view class="workerDetail_desc">
			<span>个人介绍</span>
			<view class="info_content" v-html="info.content" :style="isCol?'height:auto;':'height:70rpx;'">

			</view>
			<view class="zkbtn">
				<image v-if="!isCol" src="../../static/img/zk11.png" mode="" @click="changeIsCol(true)"></image>
				<image v-else src="../../static/img/sq11.png" mode="" @click="changeIsCol(false)"></image>
			</view>
		</view>
		<view class="workerDetail_body">
			<view class="workerDetail_body_header">
				作品列表
			</view>
			<view class="workerDetail_body_item" v-for="(item,index) in list" :key="index" @click="goWorkDetail(item)">
				<view class="workerDetail_body_itemImage">
					<image :src="item.image" mode=""></image>
				</view>
				<view class="workerDetail_body_itemInfo">
					<view class="workerDetail_body_itemInfo_title">
						{{item.title}}
					</view>
					<view class="workerDetail_body_itemInfo_date">
						{{timestamp(item.createtime)}}
					</view>
				</view>
			</view>
		</view>
		<view class="" style="padding: 20rpx 0;">
			<u-loadmore :status="status" />
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	import {
		getWorkerDetail
	} from '@/api/index.js'
	export default {
		data() {
			return {
				id: '',
				page: 1,
				limit: 10,
				info: {},
				list: [],
				status: 'loadmore',
				ceShow: false,
				noticeList: [],
				isCol:false
			}
		},
		watch: {
			socketMessage(newVal, oldVal) {
				if (newVal) {
					this.ceShow = true
					this.noticeList = [newVal.slice(0, -1)]
					setTimeout(() => {
						this.ceShow = false
					}, 10000)
				}
			}
		},
		computed: {
			...mapGetters(['getSocketMessage']),
			socketMessage() {
				return this.getSocketMessage;
			}
		},
		methods: {
			changeIsCol(val){
				this.isCol = val
			},
			goWorkDetail(item) {
				uni.navigateTo({
					url: `/pages/views/worksDetail?id=${item.id}`
				})
			},
			timestamp(timestamp) {
				var date = new Date(timestamp * 1000); // 转换为毫秒
				var year = date.getFullYear();
				var month = ('0' + (date.getMonth() + 1)).slice(-2);
				var day = ('0' + date.getDate()).slice(-2);
				var hours = ('0' + date.getHours()).slice(-2);
				var minutes = ('0' + date.getMinutes()).slice(-2);
				var seconds = ('0' + date.getSeconds()).slice(-2);

				return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
			},
			async getInfo() {
				this.status = 'loading'
				let data = {
					id: this.id,
					page: this.page,
					limit: this.limit
				}
				const res = await getWorkerDetail(data)
				this.info = res.data.detail
				this.list = [...this.list, ...res.data.list.data]
				if (res.data.list.data.length < this.limit) {
					this.status = 'nomore'
				} else {
					this.status = 'loadmore'
				}
			}
		},
		onLoad(e) {
			this.ws.pageFun(this.pageDataLoad, this);
			this.id = e.id
			this.getInfo()
		},
		onReachBottom() {
			if(this.status == 'nomore')return
			this.page++
			this.getInfo()
		}
	}
</script>

<style scoped lang="scss">
	.workerDetail {
		min-height: 100vh;
		background-color: #fff;

		.workerDetail_header {
			height: 400rpx;
			// background: linear-gradient(to bottom, #0285ff, #01eaff);
			background-image: url('../../static/img/workerBg.jpg');
			background-size: cover;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			image {
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
				margin-bottom: 20rpx;
			}

			font-size: 32rpx;
			font-weight: 600;
		}

		.workerDetail_desc {
			margin-top: 40rpx;
			padding: 0 30rpx;

			span {
				font-size: 24rpx;
				font-weight: 600;
				color: #045B9B;
			}

			.info_content {
				margin-top: 20rpx;
				overflow: hidden;
				height: 70rpx;
			}

			.zkbtn {
				display: flex;
				justify-content: center;
				margin-top: 20rpx;
				image{
					width: 108rpx;
					height: 30rpx;
				}
			}
		}

		.workerDetail_body {
			padding: 30rpx;

			.workerDetail_body_header {
				color: #045B9B;
				font-size: 24rpx;
				font-weight: 600;
			}

			.workerDetail_body_item {
				margin-bottom: 40rpx;

				.workerDetail_body_itemImage {
					margin: 20rpx 0;
					width: 690rpx;
					height: 340rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.workerDetail_body_itemInfo {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.workerDetail_body_itemInfo_title {
						max-width: 450rpx;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						font-size: 24rpx;
					}

					.workerDetail_body_itemInfo_date {
						color: #999;
						font-size: 22rpx;
					}
				}
			}
		}
	}
</style>